<template>
	<u-mask :show="show" @click="show = false" :style="overlay?'background:white':''">
		<view class="wrapper">
			<view class="sk-cube-grid">
				<img class="sk-cube sk-cube1" src="http://www.sanye666.top/static/logoImage/1.png" />
				<img class="sk-cube sk-cube2" src="http://www.sanye666.top/static/logoImage/2.png" />
				<img class="sk-cube sk-cube3" src="http://www.sanye666.top/static/logoImage/3.png" />
				<img class="sk-cube sk-cube4" src="http://www.sanye666.top/static/logoImage/4.png" />
				<img class="sk-cube sk-cube5" src="http://www.sanye666.top/static/logoImage/5.png" />
				<img class="sk-cube sk-cube6" src="http://www.sanye666.top/static/logoImage/6.png" />
				<img class="sk-cube sk-cube7" src="http://www.sanye666.top/static/logoImage/7.png" />
				<img class="sk-cube sk-cube8" src="http://www.sanye666.top/static/logoImage/8.png" />
				<img class="sk-cube sk-cube9" src="http://www.sanye666.top/static/logoImage/9.png" />
			</view>
		</view>
	</u-mask>
</template>

<script>
	export default {
		name: "Load",
		props: {
			show: {
				type: Boolean,
				default: true,
			},
			overlay: {
				type: Boolean,
				default: false,
			},
		},
		created() {},
	};
</script>

<style scoped>
	.wrapper {
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		z-index: 100;
	}

	.overlay {
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 99;
		background: white;
	}

	.sk-cube-grid {
		width: 200rpx;
		height: 200rpx;
		margin: 100rpx auto;
		position: relative;
		bottom: 30rpx;
	}

	.sk-cube-grid .sk-cube {
		width: 33%;
		height: 33%;
		/* background-color: rgba(146, 200, 255, 1); */
		float: left;
		-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
		animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
	}

	.sk-cube-grid .sk-cube1 {
		-webkit-animation-delay: 0.2s;
		animation-delay: 0.2s;
	}

	.sk-cube-grid .sk-cube2 {
		-webkit-animation-delay: 0.3s;
		animation-delay: 0.3s;
	}

	.sk-cube-grid .sk-cube3 {
		-webkit-animation-delay: 0.4s;
		animation-delay: 0.4s;
	}

	.sk-cube-grid .sk-cube4 {
		-webkit-animation-delay: 0.1s;
		animation-delay: 0.1s;
	}

	.sk-cube-grid .sk-cube5 {
		-webkit-animation-delay: 0.2s;
		animation-delay: 0.2s;
	}

	.sk-cube-grid .sk-cube6 {
		-webkit-animation-delay: 0.3s;
		animation-delay: 0.3s;
	}

	.sk-cube-grid .sk-cube7 {
		-webkit-animation-delay: 0s;
		animation-delay: 0s;
	}

	.sk-cube-grid .sk-cube8 {
		-webkit-animation-delay: 0.1s;
		animation-delay: 0.1s;
	}

	.sk-cube-grid .sk-cube9 {
		-webkit-animation-delay: 0.2s;
		animation-delay: 0.2s;
	}

	@-webkit-keyframes sk-cubeGridScaleDelay {

		0%,
		70%,
		100% {
			-webkit-transform: scale3D(1, 1, 1);
			transform: scale3D(1, 1, 1);
		}

		35% {
			-webkit-transform: scale3D(0, 0, 1);
			transform: scale3D(0, 0, 1);
		}
	}

	@keyframes sk-cubeGridScaleDelay {

		0%,
		70%,
		100% {
			-webkit-transform: scale3D(1, 1, 1);
			transform: scale3D(1, 1, 1);
		}

		35% {
			-webkit-transform: scale3D(0, 0, 1);
			transform: scale3D(0, 0, 1);
		}
	}

	.spinner {
		margin: 100rpx auto;
		width: 90rpx;
		height: 90rpx;
		position: relative;
		text-align: center;

		-webkit-animation: rotate 2s infinite linear;
		animation: rotate 2s infinite linear;
	}

	.dot1,
	.dot2 {
		width: 60%;
		height: 60%;
		display: inline-block;
		position: absolute;
		top: 0;
		background-color: rgba(146, 200, 255, 1);
		border-radius: 100%;

		-webkit-animation: bounce 2s infinite ease-in-out;
		animation: bounce 2s infinite ease-in-out;
	}

	.dot2 {
		top: auto;
		bottom: 0rpx;
		-webkit-animation-delay: -1s;
		animation-delay: -1s;
	}

	@-webkit-keyframes rotate {
		100% {
			-webkit-transform: rotate(360deg);
		}
	}

	@keyframes rotate {
		100% {
			transform: rotate(360deg);
			-webkit-transform: rotate(360deg);
		}
	}

	@-webkit-keyframes bounce {

		0%,
		100% {
			-webkit-transform: scale(0);
		}

		50% {
			-webkit-transform: scale(1);
		}
	}

	@keyframes bounce {

		0%,
		100% {
			transform: scale(0);
			-webkit-transform: scale(0);
		}

		50% {
			transform: scale(1);
			-webkit-transform: scale(1);
		}
	}
</style>
